<template>
  <!-- 详细商品 -->
  <div id="content-detailed">
  	<div id="content-detailed-img">
  		<img src="http://ft-shopping.oss-cn-chengdu.aliyuncs.com/%E6%89%8B%E6%9C%BA/content-detailed.png">
  	</div>
  	<div id="phone">
  		<span id="title" style="color: #333333;">手机</span>
  		<div id="phone-i">
  			<i class="iconfont icon-dayufuhao"></i>
  		</div>
  		<a href="" style="float: right;">
  			查看更多
  		</a>
  	</div>
  	<div id="content-DetailedPhoneContent">
  		<div id="content-detailed-left">
  			<a href=""><img src="http://ft-shopping.oss-cn-chengdu.aliyuncs.com/%E6%89%8B%E6%9C%BA/left-K40.png"></a>
  		</div>
  		<div id="content-detailed-right">
  			<ul id="phone-ul1" v-for="(p,id) in phoneList" :key="id">
  				<li>
  					<a href="">
  						<img :src="p.img" />
  						</br>
  						<h1>{{p.name}}</h1>
  						<p>{{p.datail}}</p>
  						<p>{{p.price}}元起</p>
  					</a>
             <button :id="p.id" @click="addshoppingcar" class="sp-btn">添加购物车</button>
  				</li>
          </ul>
  		</div>
  	</div>
  	<!-- 智能穿戴 -->
  	<div id="phone">
  		<span id="title" style="color: #333333;">智能穿戴</span>
  		<div id="phone-i">
  			<i class="iconfont icon-dayufuhao"></i>
  		</div>
  		<a href="" style="float: right;">
  			查看更多
  		</a>
  	</div>
  	<div id="content-DetailedWatchContent">
  		<div id="content-detailed-left">
  			<a href=""><img src="http://ft-shopping.oss-cn-chengdu.aliyuncs.com/%E6%99%BA%E8%83%BD%E7%A9%BF%E6%88%B4/left.png"></a>
  		</div>
  		<div id="content-detailed-right">
  			<ul id="phone-ul1" v-for="(w,id) in smartwearList" :key="id">
  				<li>
  						<a href="">
  							<img :src="w.img" />
  							</br>
  							<h1>{{w.name}}</h1>
  							<p>{{w.datail}}</p>
  							<p>{{w.price}}元起</p>
  						</a>
               <button :id="w.id" @click="addsmartwear" class="sp-btn">添加购物车</button>
  				</li>
  			</ul>
  		</div>
  	</div>
  	<!-- 百货商品 -->
  	<div id="general">
  		<div id="general-top">
  			<a href=""><img src="http://ft-shopping.oss-cn-chengdu.aliyuncs.com/%E6%97%A5%E7%94%A8%E7%99%BE%E8%B4%A7/g-top.png"></a>
  		</div>
  		<div id="general-buttonm">
  			<div id="general-b-nav">
  				<span id="title" style="color: #333333;">日用百货</span>
  				<div id="general-i">
  					<i class="iconfont icon-dayufuhao"></i>
  				</div>
  				<a href="" style="float: right;">
  					查看更多
  				</a>
  			</div>
  		</div>
  		<div id="general-content-top">
  			<div id="general-content-top-left">
  				<a href="details.html"><img src="http://ft-shopping.oss-cn-chengdu.aliyuncs.com/%E6%97%A5%E7%94%A8%E7%99%BE%E8%B4%A7/g-t-1.png"></a>
  			</div>
  			<div id="general-content-top-right">
  				<ul v-for="(g,id,index) in glaeList.slice(0,4)" :key="id">
  					<li>
              <a href="">
  							<img :src="g.img" />
  							</br>
  							<h1>{{g.name}}</h1>
  							<p>{{g.datail}}</p>
  							<p>{{g.price}}元起</p>
  						</a>
              <button :id="g.id" @click="addglaecar" class="sp-btn">添加购物车</button>
              </li>
  				</ul>
  			</div>
  		</div>
  		<!-- 底 -->
  		<div id="general-content-buttonm">
  			<div id="general-content-buttonm-left">
  				<a href=""><img src="http://ft-shopping.oss-cn-chengdu.aliyuncs.com/%E6%97%A5%E7%94%A8%E7%99%BE%E8%B4%A7/g-b-1.png"></a>
  			</div>
  			<div id="general-content-buttonm-right">
  					<ul v-for="(g,id,index) in glaeList.slice(4,7)" :key="id">
  						<li>
  					    <a href="">
  								<img :src="g.img" />
  								</br>
  								<h1>{{g.name}}</h1>
  								<p>{{g.datail}}</p>
  								<p>{{g.price}}元起</p>
  							</a>
                <button :id="g.id" @click="addglaecar" class="sp-btn">添加购物车</button>
  					    </li>
  				</ul>
  			</div>
        <div id="general-content-buttonm-right-right">
          <div id="gcb-top">
          	<a href="">
          		<h1>米家自动香氛套装</h1>
          		</br>
          		<p>99元</p>
          		<img :src="sign" />  <!-- 默认绑定方式 :src="glaeList[7].img",这样写不影响运行，但会导致vue初始化时找不到这个参数浏览器会发出警告，所以改成这样 -->
          	</a>
          </div>
          <div id="gcb-buttom">
          	<div id="gcb-buttom-left">
          		<h1>浏览更多</h1>
          		</br>
          		<p>呵护健康</p>
          	</div>
          	<div id="gcb-buttom-right">
          		<i class="iconfont icon-youjiantou"></i>
          	</div>
          </div>
        </div>
  		</div>
  		<div id="temp">
  		</div>
  	</div>
    <contentdetailed></contentdetailed>
  </div>
</template>

<script>
  export default{
    name:'nav-bottom',
    data(){
      return{
        phoneList:[],
        smartwearList:[],
        glaeList:[],
        sign:"", //用于解决122行，vue初始化找到不路径问题
      }
    },

    components: {
      contentdetailed: {
       render(createElement) {
        return createElement(
         'script',
         {
          attrs: {
           type: 'text/javascript',
           src: '../../static/js/content-detailed.js',
          },
         },
        );
       },
      },
     },
     created(){
        const loading = this.$loading({
                 lock: true, //控制加载时，页面是否可以滑动
                 text: '努力加载中', //文字
                 customClass:'loding',
                 spinner: 'el-icon-loading', //加载图标
                 background: 'rgb(240,255,255,0.8)', //背景色
               });
               setTimeout(() => {
                 loading.close();
               }, 2000);
               this.getphonedata()
               this.getsmartwear()
               this.getglae()
     },
     methods:{
       //获取主页手机数据,渲染页面
       getphonedata(){
         this.$axios({
           url: 'http://124.220.191.116:8081/index/phone',
           method:'get',
         }).then(res=>{
           if(res.data.code == '20021'){
            this.phoneList= res.data.date
           }else{
             this.$message({
               message: '查询失败！',
               type: 'error',
               center:true,
               duration:1000,
             })
           }
         })
       },
       //获取主页智能穿戴数据,渲染页面
       getsmartwear(){
         this.$axios({
           url: 'http://124.220.191.116:8081/index/smartwear',
           method:'get',
         }).then(res=>{
           if(res.data.code == '20021'){
            this.smartwearList= res.data.date
           }else{
             this.$message({
               message: '查询失败！',
               type: 'error',
               center:true,
               duration:1000,
             })
           }
         })
       },
       //获取主页日用百货数据,渲染页面
       getglae(){
         this.$axios({
           url: 'http://124.220.191.116:8081/index/glae',
           method:'get',
         }).then(res=>{
           if(res.data.code == '20021'){
            this.glaeList = res.data.date
            this.sign = this.glaeList[7].img //解决122行问题
           }else{
             this.$message({
               message: '查询失败！',
               type: 'error',
               center:true,
               duration:1000,
             })
           }
         })
       },
       //手机商品添加购物车
       addshoppingcar(e){
         if(sessionStorage.getItem('user')  == null ){
           this.$message({
             message: '您还未登录，请登录后在购买',
             type: 'error',
             center:true,
             duration:1000
           })
           setTimeout(()=>{
                 this.$router.push("/login")
           },1500)
         }else{
           var spcar = JSON.parse(sessionStorage.getItem('spcar')) //获取购物车session数组
           var id = e.target.id //获取目标对象id
           var s = {
             id:"",
             name:"",
             img:"",
             price:"",
             sum:0,
           }
           if(spcar.length == 0){   //初始化数组是0直接添加数据
             for(var j = 0;j<this.phoneList.length;j++){
               if(id == this.phoneList[j].id){
                 s.id = this.phoneList[j].id
                 s.name = this.phoneList[j].name
                 s.img = this.phoneList[j].img
                 s.price = this.phoneList[j].price
                 s.sum = 1
                 spcar.push(s)
                 sessionStorage.setItem('spcar',JSON.stringify(spcar))
                 //添加成功提示信息
                 this.$message({
                   message: '恭喜你，添加成功！',
                   type: 'success',
                   center:true,
                   duration:1000
                 });
                 return
               }
             }
           }else{
             for(var i = 0;i<spcar.length;i++){
                if(id == spcar[i].id ){ //session里存在了就增加个数
                  spcar[i].sum += 1;
                  sessionStorage.setItem('spcar',JSON.stringify(spcar))
                  //添加成功提示信息
                  this.$message({
                    message: '恭喜你，添加成功！',
                    type: 'success',
                    center:true,
                    duration:1000
                  });
                  return
                }
             }
             for(var j = 0;j<this.phoneList.length;j++){
               if(id == this.phoneList[j].id){
                 s.id = this.phoneList[j].id
                 s.name = this.phoneList[j].name
                 s.img = this.phoneList[j].img
                 s.price = this.phoneList[j].price
                 s.sum = 1
                 spcar.push(s)
                 sessionStorage.setItem('spcar',JSON.stringify(spcar))
                 //添加成功提示信息
                 this.$message({
                   message: '恭喜你，添加成功！',
                   type: 'success',
                   center:true,
                   duration:1000
                 });
                 return
               }
             }

           }
         }
       },
       //智能穿戴商品添加购物车
       addsmartwear(e){
         if(sessionStorage.getItem('user')  == null ){
           this.$message({
             message: '您还未登录，请登录后在购买',
             type: 'error',
             center:true,
             duration:1000
           })
           setTimeout(()=>{
                 this.$router.push("/login")
           },1500)
         }else{
           var spcar = JSON.parse(sessionStorage.getItem('spcar')) //获取购物车session数组
           var id = e.target.id //获取目标对象id
           var s = {
             id:"",
             name:"",
             img:"",
             price:"",
             sum:0,
           }
           if(spcar.length == 0){   //初始化数组是0直接添加数据
             for(var j = 0;j<this.smartwearList.length;j++){
               if(id == this.smartwearList[j].id){
                 s.id = this.smartwearList[j].id
                 s.name = this.smartwearList[j].name
                 s.img = this.smartwearList[j].img
                 s.price = this.smartwearList[j].price
                 s.sum = 1
                 spcar.push(s)
                 sessionStorage.setItem('spcar',JSON.stringify(spcar))
                 //添加成功提示信息
                 this.$message({
                   message: '恭喜你，添加成功！',
                   type: 'success',
                   center:true,
                   duration:1000
                 });
                 return
               }
             }
           }else{
             for(var i = 0;i<spcar.length;i++){
                if(id == spcar[i].id){ //session里存在了就增加个数
                  spcar[i].sum += 1;
                  sessionStorage.setItem('spcar',JSON.stringify(spcar))
                  //添加成功提示信息
                  this.$message({
                    message: '恭喜你，添加成功！',
                    type: 'success',
                    center:true,
                    duration:1000
                  });
                  return
                }
             }
             for(var j = 0;j<this.smartwearList.length;j++){
               if(id == this.smartwearList[j].id){
                 s.id = this.smartwearList[j].id
                 s.name = this.smartwearList[j].name
                 s.img = this.smartwearList[j].img
                 s.price = this.smartwearList[j].price
                 s.sum = 1
                 spcar.push(s)
                 sessionStorage.setItem('spcar',JSON.stringify(spcar))
                 //添加成功提示信息
                 this.$message({
                   message: '恭喜你，添加成功！',
                   type: 'success',
                   center:true,
                   duration:1000
                 });
                 return
               }
             }

           }
         }
       },
       //日用百货商品添加购物车
       addglaecar(e){
         if(sessionStorage.getItem('user')  == null ){
           this.$message({
             message: '您还未登录，请登录后在购买',
             type: 'error',
             center:true,
             duration:1000
           })
           setTimeout(()=>{
                 this.$router.push("/login")
           },1500)
         }else{
           var spcar = JSON.parse(sessionStorage.getItem('spcar')) //获取购物车session数组
           var id = e.target.id //获取目标对象id
           var s = {
             id:"",
             name:"",
             img:"",
             price:"",
             sum:0,
           }
           if(spcar.length == 0){   //初始化数组是0直接添加数据
             for(var j = 0;j<this.glaeList.length;j++){
               if(id == this.glaeList[j].id){
                 s.id = this.glaeList[j].id
                 s.name = this.glaeList[j].name
                 s.img = this.glaeList[j].img
                 s.price = this.glaeList[j].price
                 s.sum = 1
                 spcar.push(s)
                 sessionStorage.setItem('spcar',JSON.stringify(spcar))
                 //添加成功提示信息
                 this.$message({
                   message: '恭喜你，添加成功！',
                   type: 'success',
                   center:true,
                   duration:1000
                 });
                 return
               }
             }
           }else{
             for(var i = 0;i<spcar.length;i++){
                if(id == spcar[i].id){ //session里存在了就增加个数
                  spcar[i].sum += 1;
                  sessionStorage.setItem('spcar',JSON.stringify(spcar))
                  //添加成功提示信息
                  this.$message({
                    message: '恭喜你，添加成功！',
                    type: 'success',
                    center:true,
                    duration:1000
                  });
                  return
                }
             }
             for(var j = 0;j<this.glaeList.length;j++){
               if(id == this.glaeList[j].id){
                 s.id = this.glaeList[j].id
                 s.name = this.glaeList[j].name
                 s.img = this.glaeList[j].img
                 s.price = this.glaeList[j].price
                 s.sum = 1
                 spcar.push(s)
                 sessionStorage.setItem('spcar',JSON.stringify(spcar))
                 //添加成功提示信息
                 this.$message({
                   message: '恭喜你，添加成功！',
                   type: 'success',
                   center:true,
                   duration:1000
                 });
                 return
               }
             }

           }
         }
       },
     }
  }
</script>

<style scoped>
  @import url('../../static/css/content-detailed.css');
</style>
